<template>
  <div class="app-container">
    <SearchForm
        @search="onSearch"
        @reset="onReset"
        :search-list="searchList" :search-params="searchParams">
    </SearchForm>
    <el-card class="box-card">
<!--      <div class="table-handle">-->
<!--        <el-button type="primary" size="mini" icon="el-icon-back" @click="goBack">返回优惠券管理</el-button>-->
<!--      </div>-->
      <el-table
        v-loading="loading"
        :data="tableData"
        element-loading-text="Loading"
        border
        fit
        highlight-current-row
      >
        <el-table-column label="ID" align="center" width="80">
          <template slot-scope="scope">
            {{ scope.row.id }}
          </template>
        </el-table-column>

        <el-table-column label="用户信息" align="center" width="150">
          <template slot-scope="scope">
            <div v-if="scope.row.user">
              <div>ID: {{ scope.row.user.id }}</div>
              <div>{{ scope.row.user.nickname || scope.row.user.username }}</div>
            </div>
            <div v-else>ID: {{ scope.row.user_id }}</div>
          </template>
        </el-table-column>

        <el-table-column label="优惠券信息" align="center" width="200">
          <template slot-scope="scope">
            <div v-if="scope.row.coupon">
              <div class="coupon-name">{{ scope.row.coupon.coupon_name }}</div>
              <el-tag size="mini" :type="getCouponTypeTag(scope.row.coupon.coupon_type)">
                {{ getCouponTypeText(scope.row.coupon.coupon_type) }}
              </el-tag>
            </div>
            <div v-else>ID: {{ scope.row.coupon_id }}</div>
          </template>
        </el-table-column>

        <el-table-column label="优惠券码" align="center" prop="coupon_code" show-overflow-tooltip width="150">
        </el-table-column>

        <el-table-column label="状态" align="center" width="100">
          <template slot-scope="scope">
            <el-tag :type="getStatusTag(scope.row.status)">
              {{ getStatusText(scope.row.status) }}
            </el-tag>
          </template>
        </el-table-column>

        <el-table-column label="使用订单" align="center" width="200" show-overflow-tooltip>
          <template slot-scope="scope">
            <div v-if="scope.row.order">
              <el-button type="text" @click="viewOrder(scope.row.order.order_no)">
                订单号: {{ scope.row.order.order_no }}
              </el-button>
            </div>
            <div v-else>-</div>
          </template>
        </el-table-column>

        <el-table-column label="领取时间" align="center" width="180">
          <template slot-scope="scope">
            {{ scope.row.obtain_time }}
          </template>
        </el-table-column>

        <el-table-column label="过期时间" align="center" width="180">
          <template slot-scope="scope">
            <div :class="{ 'expired': isExpired(scope.row.expire_time) }">
              {{ scope.row.expire_time }}
            </div>
          </template>
        </el-table-column>

        <el-table-column label="使用时间" align="center" width="180">
          <template slot-scope="scope">
            {{ scope.row.use_time || '-' }}
          </template>
        </el-table-column>

        <el-table-column label="操作" align="center" width="120" fixed="right">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              @click="handleDetail(scope.row)"
            >
              详情
            </el-button>
            <el-button
              v-if="scope.row.status === 0"
              size="mini"
              type="text"
              @click="handleFreeze(scope.row)"
            >
              冻结
            </el-button>
            <el-button
              v-if="scope.row.status === 3"
              size="mini"
              type="text"
              @click="handleUnfreeze(scope.row)"
            >
              解冻
            </el-button>
            <el-button
              size="mini"
              type="text"
              @click="handleDelete(scope.row)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="page-box">
        <el-pagination
            background
            :current-page="pageNo"
            :page-sizes="pageSizes"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalSize"
            @size-change="changePageSize"
            @current-change="changePageNo"
        />
      </div>
    </el-card>

    <!-- 详情对话框 -->
    <el-dialog title="用户优惠券详情" :visible.sync="detailDialogVisible" width="600px">
      <el-descriptions :column="2" border v-if="detailData">
        <el-descriptions-item label="用户ID">{{ detailData.user_id }}</el-descriptions-item>
        <el-descriptions-item label="优惠券ID">{{ detailData.coupon_id }}</el-descriptions-item>
        <el-descriptions-item label="优惠券码">{{ detailData.coupon_code }}</el-descriptions-item>
        <el-descriptions-item label="状态">
          <el-tag :type="getStatusTag(detailData.status)">
            {{ getStatusText(detailData.status) }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="领取时间">{{ detailData.obtain_time }}</el-descriptions-item>
        <el-descriptions-item label="过期时间">{{ detailData.expire_time }}</el-descriptions-item>
        <el-descriptions-item label="使用时间">{{ detailData.use_time || '-' }}</el-descriptions-item>
        <el-descriptions-item label="使用订单">{{ detailData.order_id || '-' }}</el-descriptions-item>
        <el-descriptions-item label="创建时间">{{ detailData.create_time }}</el-descriptions-item>
        <el-descriptions-item label="更新时间">{{ detailData.update_time }}</el-descriptions-item>
      </el-descriptions>
      
      <div v-if="detailData && detailData.coupon" style="margin-top: 20px;">
        <h4>优惠券信息</h4>
        <el-descriptions :column="2" border>
          <el-descriptions-item label="优惠券名称">{{ detailData.coupon.coupon_name }}</el-descriptions-item>
          <el-descriptions-item label="优惠券类型">
            <el-tag :type="getCouponTypeTag(detailData.coupon.coupon_type)">
              {{ getCouponTypeText(detailData.coupon.coupon_type) }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="优惠内容">
            <span v-if="detailData.coupon.coupon_type === 1">
              满{{ detailData.coupon.min_amount }}减{{ detailData.coupon.amount }}
            </span>
            <span v-else-if="detailData.coupon.coupon_type === 2">
              {{ detailData.coupon.discount }}折
            </span>
            <span v-else-if="detailData.coupon.coupon_type === 3">
              无门槛减{{ detailData.coupon.amount }}
            </span>
          </el-descriptions-item>
          <el-descriptions-item label="生效时间">
            {{ detailData.coupon.start_time }} 至 {{ detailData.coupon.end_time }}
          </el-descriptions-item>
        </el-descriptions>
      </div>
      
      <div slot="footer" class="dialog-footer">
        <el-button @click="detailDialogVisible = false">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { http } from '@/api'
import crud from "@/mixins/crud";

export default {
  name: 'UserCouponManagement',
  mixins: [crud],
  data() {
    return {
      request: http.userCoupon,
      searchList: [
        { label: '用户ID', prop: 'user_id', name: 'input' },
        { label: '优惠券ID', prop: 'coupon_id', name: 'input' },
        { label: '优惠券码', prop: 'coupon_code', name: 'input' },
        { label: '状态', prop: 'status', name: 'select', options: [
          { label: '未使用', value: 0 },
          { label: '已使用', value: 1 },
          { label: '已过期', value: 2 },
          { label: '已冻结', value: 3 }
        ]}
      ],
      searchParams: {
        user_id: '',
        coupon_id: '',
        coupon_code: '',
        status: ''
      },
      detailDialogVisible: false,
      detailData: null
    }
  },
  methods: {
    // 获取优惠券类型文本
    getCouponTypeText(type) {
      const typeMap = {
        1: '满减券',
        2: '折扣券',
        3: '无门槛券'
      }
      return typeMap[type] || '未知类型'
    },

    // 获取优惠券类型标签颜色
    getCouponTypeTag(type) {
      const tagMap = {
        1: 'primary',
        2: 'success',
        3: 'warning'
      }
      return tagMap[type] || 'info'
    },

    // 获取状态文本
    getStatusText(status) {
      const statusMap = {
        0: '未使用',
        1: '已使用',
        2: '已过期',
        3: '已冻结'
      }
      return statusMap[status] || '未知状态'
    },

    // 获取状态标签颜色
    getStatusTag(status) {
      const tagMap = {
        0: 'success',
        1: 'info',
        2: 'warning',
        3: 'danger'
      }
      return tagMap[status] || 'info'
    },

    // 检查是否过期
    isExpired(expireTime) {
      return new Date(expireTime) < new Date()
    },

    // 查看订单详情
    viewOrder(orderId) {
      this.$router.push({ path: `/order/list?order_no=${orderId}` })
    },

    // 查看详情
    handleDetail(row) {
      this.detailData = row
      this.detailDialogVisible = true
    },

    // 冻结优惠券
    handleFreeze(row) {
      this.$confirm('确认冻结该优惠券吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.request.update(row.id, { status: 3 }).then(() => {
          this.$message.success('冻结成功')
          this.onSearch()
        })
      }).catch(() => {})
    },

    // 解冻优惠券
    handleUnfreeze(row) {
      this.$confirm('确认解冻该优惠券吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.request.update(row.id, { status: 0 }).then(() => {
          this.$message.success('解冻成功')
          this.onSearch()
        })
      }).catch(() => {})
    },

    // 删除
    handleDelete(row) {
      this.$confirm('确认删除该用户优惠券吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.request.delete(row.id).then(() => {
          this.$message.success('删除成功')
          this.onSearch()
        })
      }).catch(() => {})
    },

    // 返回优惠券管理
    goBack() {
      this.$router.push('/coupon/list')
    }
  }
}
</script>

<style scoped lang="scss">
.coupon-name {
  font-weight: bold;
  margin-bottom: 5px;
}

.expired {
  color: #f56c6c;
}

.page-box {
  margin-top: 20px;
  text-align: right;
}

.table-handle {
  margin-bottom: 20px;
}
</style> 